<!doctype html>
<html lang="en">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="Pragma" content="no-cache" />
  <title>地图</title>
  <link href="nboit.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_959604_6wg0uubepc3.css" type="text/css">
  <style>
    html, body, #container {
            height: 100%;
            width: 100%;
        }
        .input-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    width: 58rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    top: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
}

.infomation {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    top: 7.4rem;
    right: 33rem;
}

.alert {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    /* top: 25rem; */
    right: 0rem;
    bottom: 54px;
}

.alart_button {
    width: 20px;
    position: fixed;
    z-index: 1;
    /* top: 58px; */
    bottom: 372px;
    right: 0;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 3px 10px 10px;
    background: #1890ff;
    color: #fff;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 5px;
    cursor: pointer;
}

.el-button--text {
    border-color: transparent;
    color: #606266;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.alarmlist-header-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
            flex: 1;
    padding: 0 6px;
    font-size: 15px;
    text-align: center;
}
.left-toolbar{
  left: 1rem;
  width: 67px;
  box-sizing: border-box;
}
    </style>
</head>

<body>
  <div id="container" class="map" tabindex="0">
  </div>
  <div class="input-card">
    <div class="el-card__body" style="padding: 0">
      <div class="equip-group" id="alert_head">

      </div>
    </div>
  </div>
  <div class="input-card left-toolbar">
    <button type="button" class="el-button equip-group-item el-button--text">
      <i class="el-icon-refresh equip-group-icon" style="font-size: 23px;" onClick='window.location.reload()'></i>
    </button>
  </div>
  <div id="infomation" class="infomation"></div>
  <!-- <div class="alert" id="alert" style="display: none">
    <div data-v-3b0a5e93="" class="alarm-window-inhome">
      <div class="alart_button" onclick="alert_content()">
        <span class="el-icon-arrow-left" style="margin-bottom: 5px; font-weight: bold;"></span><br>报警弹框
      </div>
      <div class="alarm-window" style="margin-right: 34px;" id="alams_content">

      </div>
    </div>
    <audio id="music1" src="./fire.wav"></audio>
  </div> -->
  <div class="alert" id="alert_root"></div>
  <script src="//a.amap.com/jsapi_demos/static/china.js"></script>
  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=7b5b68d8eedd376a331579722714be19&plugin=AMap.MarkerClusterer"></script>
  <script src="jquery-1.8.2.min.js"></script>
  <!-- <script src="map.js"></script> -->
  <script>
    document.write('<script src="./map.js?rnd=' + Math.random() + "\"" + '><\/script>');
    document.write('<script src="./alarm_window.js?rnd=' + Math.random() + "\"" + '><\/script>');
  </script>
  <!-- <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script> -->
  <script src="./lib/vue.min.js"></script>
  <!-- <script src="./alarm_window.js"></script> -->

  <template id='alarm-window-tpl'>
    <div class="alert" id="alert_root" v-if='isShowWindow && alertInfo'>
      <div class="alarm-window-inhome">
        <div class="alart_button" @click="triggerAlertContent">
          <span :class="!isShowContent ? 'el-icon-arrow-left' : 'el-icon-arrow-right' " style="margin-bottom: 5px; font-weight: bold;"></span><br>报警弹框
        </div>
        <div class="alarm-window" style="margin-right: 34px;" id="alams_content" v-if='isShowContent'>
          <div class="dialog-body el-row">
            <div class="dialog-image">
              <!-- <a class="el-icon-close dialog-close" onclick="setdown()"></a> -->
              <img src="./alarm2.gif" style="width: 100px;">
            </div>
            <div class="dialog-title"><i class="icon-yangantanceqi dialog-title-icon"></i>
              <span class="dialog-title-text">
                {{alertInfo.codeserial}}编号设备报警
              </span>
            </div>
            <div class="el-col el-col-24">
              <form class="el-form edit-model-form el-form--label-left el-loading-parent--relative" style="padding-left: 0px;">
                <template v-for="(alert,index) in alertList">
                  <template v-if='index == currentIndex'>
                    <div class="el-form-item el-form-item--mini">
                      <div class="el-form-item__content">
                        <div class="el-col el-col-15"><span class="dialog-form-label">报警时间：</span>{{alert.created_time}}</div>
                        <div class="el-col el-col-7"><span class="dialog-form-label">报警次数：</span>{{alertInfo.alarm_times}}</div>
                      </div>
                    </div>
                    <div class="el-form-item el-form-item--mini">
                      <div class="el-form-item__content">
                        <div class="el-col el-col-15"><span class="dialog-form-label">报警接收：</span>无</div>
                      </div>
                    </div>
                    <div class="el-form-item el-form-item--mini">
                      <div class="el-form-item__content">
                        <span class="dialog-form-label">设备位置：</span>
                        <span>{{alertInfo.device_address}}</span>
                      </div>
                    </div>
                    <div class="el-form-item el-form-item--mini">
                      <div class="el-form-item__content">
                        <span class="dialog-form-label">报警类型：</span>
                        <span>{{alert.alarm_type}}</span>
                        <div class="el-form-item__content"><span class="dialog-form-label">设备类型：</span>
                          <span>{{alertInfo.device_category}}</span>
                        </div>
                      </div>
                    </div>
                    <div class="el-form-item is-required el-form-item--mini" style="margin-bottom: 8px;">
                      <div class="el-form-item__content">
                        <div class="el-col el-col-4"><span class="dialog-form-label">报警原因：</span></div>
                        <div class="el-col el-col-20">
                          <select name="" id="alarm_type" style=" background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit; height: 40px;line-height: 1;outline: none;padding: 0 15px;transition: border-color .2s cubic-bezier(.645, .045, .355, 1);width: 100%;"
                            v-model="formValue[index].alarm_type">
                            <option value="1">电池电量过低</option>
                            <option value="2">探测器失联</option>
                            <option value="3">设备底座被打开</option>
                            <option value="4">日常生活报警</option>
                            <option value="5">演示测试报警</option>
                            <option value="6">真实火灾报警</option>
                          </select></div>
                      </div>
                    </div>
                    <div class="el-form-item el-form-item--mini">
                      <div class="el-form-item__content">
                        <div class="el-col el-col-4"><span class="dialog-form-label">解除原因：</span></div>
                        <div class="el-col el-col-20">
                          <textarea v-model="formValue[index].remark" id="alarm_reason" rows="2" style="display: block;resize: vertical;padding: 5px 15px;line-height: 1.5;box-sizing: border-box; width: 100%;font-size: inherit;color: #606266;background-color: #fff;background-image: none;border: 1px solid #dcdfe6;border-radius: 4px;transition: border-color .2s cubic-bezier(.645, .045, .355, 1);"></textarea>
                        </div>
                      </div>
                    </div>
                  </template>
                </template>
              </form>
            </div>
          </div>
          <div class="dialog-footer">
            <span class="dialog-form-label">{{currentIndex + 1}}/{{alertList.length}}</span>
            <button @click="prev" :disabled='!canPrev' type="button" :class="'el-button el-button--default el-button--mini' + ((!canPrev) ?  ' is-disabled' : '')"
              style="padding: 7px; margin-left: 10px;">
              <i class="el-icon-arrow-left"></i>
            </button>
            <button @click="next" :disabled='!canNext' type="button" :class="'el-button el-button--default el-button--mini'  + ((!canNext) ?  ' is-disabled' : '')"
              style="padding: 7px; margin-left: 10px;">
              <i class="el-icon-arrow-right"></i>
            </button>
            <div style="float: right;">
              <button type="button" @click="triggerAudio" class="el-button alarm-switch el-button--text el-button--mini">
                <span><span :class="isAudioPlay ? 'icon-bell' : 'icon-bellmute'" :style="isAudioPlay ? 'color: rgb(255, 0, 0);' : 'color: rgb(0, 0, 0);'">
                  </span></span>
              </button>
              <!-- <button type="button" class="el-button alarm-switch el-button--text el-button--mini">
                <i class="el-icon-refresh"></i>
              </button> -->
              <button type="button" @click="deal" class="el-button el-button--primary el-button--mini">
                <span>处 置</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <audio ref='audioRef' id="music1" src="./fire.wav"></audio>
    </div>
  </template>
  <script type="text/javascript">
    // var alertInfoObject;
    // var int;
    // var list;
    // var alertinterval = setInterval("getAlert()", 3000);
    // var host = 'http://fire.tomobo.com/api/';
    // function clock() {
    //   var audio = document.getElementById('music1');
    //   audio.play();
    // }

    // function alert_content() {
    //   var o = document.getElementById("alams_content").style.display;
    //   if (o == 'none') {
    //     $('#alams_content').show();
    //   }
    //   else {
    //     $('#alams_content').hide();
    //   }
    // }

    // function bf() {
    //   var audio = document.getElementById('music1');
    //   if (audio.paused) {
    //     audio.play();
    //   }
    //   else {
    //     audio.pause();// 这个就是暂停

    //   }
    // }
    // //开始查询报警轮询
    // function startInterval() {
    //   alertinterval = setInterval("getAlert()", 3000);
    // }
    // //暂停查询报警轮询
    // function stopInterval() {
    //   clearInterval(alertinterval);
    // }
    // function clearAudioInterval() {
    //   clearInterval(int);
    // }

    // function setdown() {
    //   $('#alams_content').hide();
    // }



    // window.onload = function () {
      //   $.ajax({
      //     url: host + '?m=system.FrontPage.getPosition',
      //     type: "post",
      //     dataType: "json",
      //     success: function (msg) {
      //       list = msg;
      //       var total = msg.base.total;
      //       var yan = msg.base.yan;
      //       var wen = msg.base.wen;
      //       var qi = msg.base.qi;
      //       var alert = msg.base.alert;
      //       var online = msg.base.online;
      //       var a = '';
      //       var b = '';
      //       var y = '';
      //       var w = '';
      //       var q = '';
      //       var rate = ((online / total) * 100).toFixed(2);

      //       var info = msg.info;
      //       var cluster, markers = [];
      //       var map = new AMap.Map("container", {
      //         resizeEnable: true,
      //         center: [114, 23],
      //         zoom: 9
      //       });
      //       for (var i = 0; i < info.length; i += 1) {
      //         var aa = info[i].position.split(',')[0];
      //         var bb = info[i].position.split(',')[1];
      //         var type = info[i].type;
      //         if (type == 11) { //烟
      //           icon = 'yanwu1.png';
      //         }
      //         else if (type == 12) {//温
      //           icon = 'wendu1.png';
      //         }
      //         else {//气
      //           icon = 'ranqi1.png';
      //         }
      //         var startIcon = new AMap.Icon({
      //           // 图标尺寸
      //           size: new AMap.Size(27.56, 35),
      //           // 图标的取图地址
      //           image: icon,
      //           // 图标所用图片大小
      //           imageSize: new AMap.Size(27.56, 35),
      //         });
      //         var marker = new AMap.Marker({
      //           position: [aa, bb],
      //           icon: startIcon,
      //           offset: new AMap.Pixel(-15, -15)
      //         });
      //         markers.push(marker);
      //         marker.id = info[i].id;
      //         marker.codeserial = info[i].codeserial;
      //         marker.device_address = info[i].device_address;
      //         marker.on('click', markerClick);
      //         AMap.event.addListener(marker, 'click', markerClick)
      //       }
      //       var sts = [
      //         {
      //           url: "m1.png",
      //           size: new AMap.Size(53, 53),
      //           textColor: '#f5f7fa'
      //         }];
      //       cluster = new AMap.MarkerClusterer(map, markers, { minClusterSize: 2, gridSize: 80, styles: sts });
      //     }
      //   });
      // };
      /**
       * 参数:[{}]
       * 返回值:[{codeserial:string,list:[{}]}]
    //    */
    //   function getAlert() {
    //     $.ajax({
    //       url: host + '?m=system.FrontPage.alertInfo',
    //       type: "post",
    //       dataType: "json",
    //       success: function (msg) {
    //         msg = {
    //           code: 1,
    //           info: []
    //         }
    //         if (msg.code == 1) {
    //           if (msg.info) {
    //             //alertInfoObject = msg.info;
    //             alertInfoObject = handleInfo(mockData);
    //             if ($('#alert').is(':hidden') && alertInfoObject.length) {
    //               $('#alert').show();
    //               showContent(1);
    //               int = setInterval("clock()", 6000);
    //             }
    //           }
    //         }
    //         else {
    //           closeAlert();
    //           clearAudioInterval();
    //         }
    //       }
    //     });
    //   }
    //   function showContent(page) {
    //     //只处理第一条数据
    //     var info = alertInfoObject[0].list[page - 1];
    //     var total = alertInfoObject[0].list.length;
    //     var lbt = '';
    //     var rbt = '';
    //     var down = Number(page) - 1;
    //     var up = Number(page) + 1;
    //     if (Number(total) > 1) {
    //       if (Number(page) == Number(total)) {
    //         lbt = '<button  onclick="showContent(' + down + ')"  type="button" class="el-button el-button--default el-button--mini"style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-left"></i></button>'
    //         rbt = '<button  disabled="disabled"  type="button" class="el-button el-button--default el-button--mini is-disabled"style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-right"></i></button>'
    //       }
    //       else if (Number(page) == 1) {
    //         lbt = '<button  disabled="disabled"   type="button" class="el-button el-button--default el-button--mini is-disabled"style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-left"></i></button>'
    //         rbt = '<button onclick="showContent(' + up + ')"  type="button" class="el-button el-button--default el-button--mini "style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-right"></i></button>'
    //       }
    //       else {
    //         lbt = '<button  onclick="showContent(' + down + ')" type="button" class="el-button el-button--default el-button--mini"style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-left"></i></button>'
    //         rbt = '<button  onclick="showContent(' + up + ')" type="button" class="el-button el-button--default el-button--mini"style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-right"></i></button>'
    //       }
    //     }
    //     else {
    //       lbt = '<button disabled="disabled" type="button" class="el-button el-button--default el-button--mini is-disabled"style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-left"></i></button>'
    //       rbt = '<button disabled="disabled" type="button" class="el-button el-button--default el-button--mini is-disabled"style="padding: 7px; margin-left: 10px;"><i class="el-icon-arrow-right"></i></button>'
    //     }

    //     var foot = '<div class="dialog-footer"><span class="dialog-form-label">' + page + '/' + total + '</span>' +
    //       lbt + rbt +
    //       '<div style="float: right;">' +
    //       '<button type="button" onclick="bf()" class="el-button alarm-switch el-button--text el-button--mini">' +
    //       '<span><span class="el-icon-bell" style="color: rgb(255, 0, 0);"></span></span></button>' +
    //       '<button type="button" class="el-button alarm-switch el-button--text el-button--mini"><i class="el-icon-refresh"></i></button>' +
    //       '<button type="button" onclick="deal()" class="el-button el-button--primary el-button--mini"><span>处 置</span></button>' +
    //       '</div>' +
    //       '</div>';

    //     var centent = '';
    //     centent += '<div class="dialog-body el-row"><input type="hidden" id="codeserial" value="' + info.codeserial + '">  ' +
    //       '<div class="dialog-image"><a class="el-icon-close dialog-close" onclick="setdown()"></a><img src="./alarm2.gif" style="width: 100px;"></div>' +
    //       '<div class="dialog-title"><i class="icon-yangantanceqi dialog-title-icon"></i> <span class="dialog-title-text"> ' + info.codeserial + '编号设备报警</span></div>' +
    //       '<div class="el-col el-col-24">' +
    //       '<form class="el-form edit-model-form el-form--label-left el-loading-parent--relative" style="padding-left: 0px;">' +
    //       '<div class="el-form-item el-form-item--mini">' +
    //       '<div class="el-form-item__content">' +
    //       '<div class="el-col el-col-15"><span class="dialog-form-label">报警时间：' + info.created_time + '</span></div>' +
    //       '<div class="el-col el-col-7"><span class="dialog-form-label">报警次数：' + info.alarm_times + '</span></div>' +
    //       '</div>' +
    //       '</div>' +
    //       '<div class="el-form-item el-form-item--mini">' +
    //       '<div class="el-form-item__content">' +
    //       '<div class="el-col el-col-15"><span class="dialog-form-label">报警接收：</span>无</div>' +
    //       '</div>' +
    //       '</div>' +
    //       '<div class="el-form-item el-form-item--mini">' +
    //       '<div class="el-form-item__content"><span class="dialog-form-label">设备位置：' + info.device_address + '</span><span></span>' +
    //       '</div>' +
    //       '</div>' +
    //       '<div class="el-form-item el-form-item--mini">' +
    //       '<div class="el-form-item__content"><span class="dialog-form-label">报警类型：' + info.alarm_type + '</span><span></span>' +
    //       '<div class="el-form-item__content"><span class="dialog-form-label">设备类型：' + info.device_category + '</span><span></span>' +
    //       '</div>' +
    //       '</div>' +
    //       '</div>' +
    //       '<div class="el-form-item is-required el-form-item--mini" style="margin-bottom: 8px;">' +
    //       '<div class="el-form-item__content">' +
    //       '<div class="el-col el-col-4"><span class="dialog-form-label">报警原因：</span></div>' +
    //       '<div class="el-col el-col-20">' +
    //       '<select name="" id="alarm_type" style=" background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit; height: 40px;line-height: 1;outline: none;padding: 0 15px;transition: border-color .2s cubic-bezier(.645, .045, .355, 1);width: 100%;">' +
    //       '<option value="1">电池电量过低</option>' +
    //       '<option value="2">探测器失联</option>' +
    //       '<option value="3">设备底座被打开</option>' +
    //       '<option value="4">日常生活报警</option>' +
    //       '<option value="5">演示测试报警</option>' +
    //       '<option value="6">真实火灾报警</option>' +
    //       '</select>' +
    //       '</div>' +
    //       '</div>' +
    //       '</div>' +
    //       '<div class="el-form-item el-form-item--mini">' +
    //       '<div class="el-form-item__content">' +
    //       '<div class="el-col el-col-4"><span class="dialog-form-label" >解除原因：</span></div>' +
    //       '<div class="el-col el-col-20">' +
    //       '<textarea name="" id="alarm_reason" rows="2" style="display: block;resize: vertical;padding: 5px 15px;line-height: 1.5;box-sizing: border-box; width: 100%;font-size: inherit;color: #606266;background-color: #fff;background-image: none;border: 1px solid #dcdfe6;border-radius: 4px;transition: border-color .2s cubic-bezier(.645, .045, .355, 1);"></textarea>' +
    //       ' </div>' +
    //       '</div>' +
    //       '</div>' +
    //       '</form>' +
    //       '</div>' +
    //       '</div>';
    //     centent += foot;
    //     $('#alams_content').html(centent);
    //   }

    //   function deal() {
    //     var codeserial = $('#codeserial').val();
    //     var alarm_type = $('#alarm_type').val();
    //     var alarm_reason = $('#alarm_reason').val();
    //     var data = {
    //       'codeserial': codeserial,
    //       'alarm_type': alarm_type,
    //       'alarm_reason': alarm_reason,
    //     };
    //     //点击处置按钮后，先暂停轮询，不然未知轮询请求和处理请求顺序
    //     stopInterval();
    //     //parent.dealee(data);
    //     parent.mockDealee(data);
    //   }



    //   //销毁当前警报页面
    //   function closeAlert() {
    //     $('#alert').hide();
    //   }
    // }
  </script>
</body>

</html>